import { BasicColumn } from '@/components/Table';
import { FormSchema } from '@/components/Table';
import { h } from 'vue';
import { ref, unref, computed, onMounted } from 'vue';
import { Tag } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { getPermissions } from '@/api/sys/sysDictTypeManage';
import { useDebounceFn } from '@vueuse/core';

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'title',
    width: 200,
    align: 'left',
    customRender: ({ text, record }) => {
      return h('div', null, [
        record.type === '1'
          ? h(Icon, {
              icon: 'ic:round-featured-play-list',
              color: 'blue',
            })
          : h(Icon, { icon: 'tdesign:button', color: 'green' }),
        text,
      ]);
    },
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 50,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.icon });
    },
  },
  {
    title: '权限标识',
    dataIndex: 'permission',
    width: 180,
  },
  {
    title: '编码',
    dataIndex: 'name',
    width: 180,
  },
  {
    title: '组件',
    dataIndex: 'component',
    width: 220,
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 50,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 0;
      const color = enable ? 'green' : 'red';
      const text = enable ? '启用' : '停用';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 180,
  },
];

const isMenu = (type: string) => type === '1';
const isButton = (type: string) => type === '2';

export const searchFormSchema: FormSchema[] = [
  {
    field: 'menuName',
    label: '菜单名称',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    componentProps: {
      options: [
        { label: '启用', value: 0 },
        { label: '停用', value: 1 },
      ],
    },
    colProps: { span: 8 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'id',
    label: '',
    component: 'Input',
    show: false,
  },
  {
    field: 'type',
    label: '菜单类型',
    component: 'ApiRadioGroup',
    defaultValue: '1',
    componentProps: {
      options: [
        // { label: '目录', value: 0 },
        { label: '菜单', value: '1' },
        { label: '按钮', value: '2' },
      ],
    },
    colProps: { lg: 24, md: 24 },
  },
  {
    field: 'title',
    label: '菜单名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'name',
    label: '菜单编码',
    component: 'Input',
    required: true,
  },
  {
    field: 'pid',
    label: '上级菜单',
    component: 'TreeSelect',
    required: true,
    componentProps: {
      replaceFields: {
        title: 'title',
        key: 'id',
        value: 'id',
      },
      getPopupContainer: () => document.body,
    },
  },

  {
    field: 'sort',
    label: '排序',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'icon',
    label: '图标',
    component: 'IconPicker',
    required: true,
    ifShow: ({ values }) => !isButton(values.type),
  },

  {
    field: 'path',
    label: '路由地址',
    component: 'Input',
    required: true,
    ifShow: ({ values }) => !isButton(values.type),
  },
  {
    field: 'openType',
    label: '打开方式',
    component: 'ApiRadioGroup',
    defaultValue: '1',
    componentProps: {
      options: [
        { label: '组件', value: '1' },
        { label: '内链', value: '2' },
        { label: '外链', value: '3' },
      ],
    },
    ifShow: ({ values }) => !isButton(values.type),
  },
  {
    field: 'frameSrc',
    label: '外链',
    component: 'Input',
    ifShow: ({ values }) => values.openType === '3',
  },
  {
    field: 'component',
    label: '组件路径',
    component: 'Input',
    ifShow: ({ values }) => values.openType === '1' && values.type === '1',
  },
  {
    field: 'permission',
    label: '权限标识',
    helpMessage: '注解的code',
    component: 'ApiSelect',
    ifShow: ({ values }) => values.type === '2',
    componentProps: {
      api: getPermissions,
      showSearch: true,
    },
  },
  {
    field: 'hasSearchPermission',
    label: '控制查询权限',
    component: 'ApiRadioGroup',
    defaultValue: 'N',
    ifShow: ({ values }) => values.type === '2',
    componentProps: {
      options: [
        { label: '是', value: 'Y' },
        { label: '否', value: 'N' },
      ],
    },
  },
  {
    field: 'status',
    label: '状态',
    component: 'ApiRadioGroup',
    defaultValue: 0,
    componentProps: {
      options: [
        { label: '启用', value: 0 },
        { label: '禁用', value: 1 },
      ],
    },
  },
  {
    field: 'keepalive',
    label: '是否缓存',
    component: 'ApiRadioGroup',
    defaultValue: true,
    componentProps: {
      options: [
        { label: '否', value: false },
        { label: '是', value: true },
      ],
    },
    ifShow: ({ values }) => isMenu(values.type),
  },

  {
    field: 'hideMenu',
    label: '是否隐藏菜单',
    component: 'ApiRadioGroup',
    defaultValue: false,
    componentProps: {
      options: [
        { label: '是', value: true },
        { label: '否', value: false },
      ],
    },
    ifShow: ({ values }) => !isButton(values.type),
  },
  {
    field: 'weight',
    label: '权重',
    component: 'ApiRadioGroup',
    defaultValue: '1',
    componentProps: {
      options: [
        { label: '系统', value: '1' },
        { label: '业务', value: '2' },
      ],
    },
    ifShow: ({ values }) => !isButton(values.type),
  },
];

export const dataScopeColumns: BasicColumn[] = [
  {
    title: '规则名称',
    align: 'center',
    dataIndex: 'ruleName',
  },
  {
    title: '字段',
    align: 'center',
    dataIndex: 'ruleColumn',
  },
  {
    title: '条件',
    align: 'center',
    dataIndex: 'ruleConditions',
  },
  {
    title: '规则值',
    align: 'center',
    dataIndex: 'ruleValue',
  },
  {
    title: '是否通用',
    align: 'center',
    dataIndex: 'isCommon',
  },
  {
    title: '权限有效',
    align: 'center',
    dataIndex: 'status',
  },
];

export const dataScopeSearchFormSchema: FormSchema[] = [
  {
    field: 'ruleName',
    label: '规则名称',
    component: 'Input',
  },
];
const customerKeyword = ref('');
const onSearch = useDebounceFn((value) => {
  customerKeyword.value = value;
}, 500);

const searchParams = computed(() => {
  return unref(customerKeyword);
});
export const dataScopeFormSchema: FormSchema[] = [
  {
    field: 'id',
    label: '',
    component: 'Input',
    show: false,
  },
  {
    field: 'menuId',
    label: '菜单ID',
    component: 'Input',
    show: false,
  },
  {
    field: 'ruleName',
    label: '规则名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'ruleColumn',
    label: '字段',
    component: 'Input',
    required: true,
    ifShow: ({ values }) => values.ruleConditions !== 'use_sql_rules',
  },
  {
    field: 'ruleConditions',
    label: '条件',
    component: 'ApiSelect',
    componentProps: {
      dictCode: 'rule_conditions',
    },
    required: true,
  },
  {
    field: 'ruleValue',
    label: '规则值',
    component: 'ApiSelect',
    ifShow: ({ values }) => values.ruleConditions !== 'use_sql_rules',
    componentProps: {
      dictCode: 'data_rule_preset',
    },
    required: true,
  },
  {
    field: 'ruleValue',
    label: '规则值',
    component: 'Input',
    ifShow: ({ values }) => values.ruleConditions === 'use_sql_rules',
    required: true,
  },
  {
    field: 'isCommon',
    label: '是否通用',
    component: 'ApiRadioGroup',
    required: true,
    defaultValue: 'N',
    componentProps: {
      dictCode: 'yes_or_no',
    },
  },
  {
    field: 'status',
    label: '是否有效',
    component: 'ApiRadioGroup',
    required: true,
    defaultValue: 'Y',
    componentProps: {
      dictCode: 'yes_or_no',
    },
  },
  {
    field: 'mapper',
    label: 'mapper范围',
    component: 'ApiSelect',
    required: true,
    componentProps: {
      mode: 'multiple',
      api: '/common/mappers',
      showSearch: true,
      onSearch,
      params: {
        keyword: searchParams,
      },
    },
  },
];
